<script>
import { addEmployeeAPI, findEmployeeAPI, updateEmployeeAPI } from '@/api/employeeApi'
import { employmentForm } from '@/constant'
import { validMobile } from '@/utils/validate'
import { format } from '@/utils'
import Cascader from '@/views/employee/components/Cascader.vue'
import Upload from '@/views/employee/components/Upload.vue'
import Avatar from '@/components/Avatar/Avatar.vue'
export default {
  name: 'Detail',
  data() {
    /* 手机号的自定义校验规则 */
    const validateMobile = (rule, value, callback) => {
      if (!validMobile(value)) return callback(new Error('手机号码格式错误'))
      callback()
    }
    /* 验证转正日期的回调函数 */
    const validateCorrectionTime = (rule, value, callback) => {
      // 转正日期
      const correctionTime = new Date(value)
      // 入职日期
      const timeOfEntry = new Date(this.formData.timeOfEntry)
      if (correctionTime <= timeOfEntry) {
        callback(new Error('转正日期不能小于入职日期'))
      } else {
        callback()
      }
    }
    /* 验证入职日期的回调函数 */
    const validateTimeOfEntry = (rule, value, callback) => {
      // 转正日期
      const correctionTime = new Date(this.formData.correctionTime)
      // 入职日期
      const timeOfEntry = new Date(value)
      if (timeOfEntry >= correctionTime) {
        callback(new Error('入职日期不能大于转正日期'))
      } else {
        callback()
      }
    }
    return {
      employmentForm,
      /* 表单数据对象 */
      formData: {
        // 员工名字
        username: '',
        // 员工手机号
        mobile: '',
        // 员工聘用形式
        formOfEmployment: '',
        // 员工工号
        workNumber: '',
        // 员工部门id
        departmentId: null,
        // 员工入职日期
        timeOfEntry: '',
        // 员工转正日期
        correctionTime: '',
        // 员工头像
        staffPhoto: ''
      },
      /* 表单规则对象 */
      formRules: {
        username: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
        formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'change' }],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' },
          { validator: validateTimeOfEntry, trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' },
          { validator: validateCorrectionTime, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 获取员工详情的接口 */
    async fetchEmployeeDetail() {
      // 获取params参数中的id
      const id = this.$route.params.id
      // 如果没有id则不发送此次获取员工详情的请求
      if (!id) return
      try {
        const { message, data } = await findEmployeeAPI(id)
        this.$message.success(message)
        this.formData = data
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    /* 添加员工的请求函数 */
    async doAdd() {
      try {
        const { timeOfEntry, correctionTime } = this.formData
        const data = { ...this.formData, timeOfEntry: format(timeOfEntry, 'YYYY-MM-DD'), correctionTime: format(correctionTime, 'YYYY-MM-DD') }
        const { message } = await addEmployeeAPI(data)
        this.$message.success(message)
        this.$router.back()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    /* 编辑就员工的请求函数 */
    async doEdit() {
      try {
        const { message } = await updateEmployeeAPI(this.formData)
        this.$message.success(message)
        this.$router.back()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    /* 点击保存按钮的回调函数 */
    async handleSubmit() {
      const valid = await this.$refs.form.validate().catch(e => e)
      if (!valid) return
      // 判断是否有params参数如果有params参数的id字段则是编辑，否则添加
      if (this.$route.params.id) {
        this.doEdit()
      } else {
        this.doAdd()
      }
    }
  },
  mounted() {
    /* 组件挂载完毕调用fetchEmployeeDetail()获取当前的员工详情(只有在有params参数的情况下获取详情) */
    this.fetchEmployeeDetail()
  },
  components: {
    Avatar,
    Cascader,
    Upload
  }
}
</script>

<template>
  <div class="detail">
    <el-card class="layui-anim layui-anim-scale">
      <el-form label-width="120px" :model="formData" :rules="formRules" ref="form">
        <el-form-item label="姓名" prop="username">
          <el-input placeholder="请输入姓名" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="工号">
          <el-input placeholder="工号由服务生成" :disabled="true" v-model="formData.workNumber"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input placeholder="请输入手机号" v-model="formData.mobile"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <Cascader v-model="formData.departmentId"></Cascader>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select placeholder="请选择聘用形式" v-model="formData.formOfEmployment">
            <el-option v-for="(item,index) in employmentForm" :value="item.id" :label="item.label" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker type="date" placeholder="选择日期" v-model="formData.timeOfEntry"></el-date-picker>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="formData.correctionTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="员工头像">
          <Upload v-model="formData.staffPhoto"></Upload>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="$router.back()">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存更新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.detail {
  .el-card {
    margin-top: 10px;

    .el-form {
      width: 20%;

      .el-date-editor {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }

      .el-cascader {
        width: 100%;
      }
    }
  }
}
</style>
